<!-- 收费分类管理 -->
<template>
	<!-- 面包屑区 -->
	<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/counselorInfo' }">咨询师信息管理</el-breadcrumb-item>
			<el-breadcrumb-item>留言管理</el-breadcrumb-item>
	</el-breadcrumb>
	<!-- 查询 -->
	<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
		<el-form-item label="留言">
			<el-input v-model="queryInfo.talkContext" autocomplete="off" placeholder="请输入留言" clearable @clear="queryDataList"></el-input>
		</el-form-item>
		<el-form-item label="回复">
			<el-input v-model="queryInfo.talkReply" autocomplete="off" placeholder="请输入回复" clearable @clear="queryDataList"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="queryDataList">搜索</el-button>
			<!-- <el-button type="primary" @click="add"> 新增收费分类</el-button> -->
			<el-button type="danger" @click="batchRemove"> 批量删除</el-button>
		</el-form-item>
	</el-form>
	<!-- 展示表格-->
	<el-table :data="dataList" row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column fixed="left" :data-="dataList" type="selection" width="55" />
			<el-table-column fixed="left" property="id" label="ID" width="60" />
			<el-table-column property="talkContext" label="留言" />
			<el-table-column property="talkReply" label="回复" />
			<el-table-column property="sysUser.username" label="用户名" />
			<el-table-column property="consultant.consultantName" label="咨询师名" />
<!--			<el-table-column property="classify" label="回复状态" />-->
				<el-table-column fixed="right"dsasd label="操作" min-width="120">
					<template #default="scope">
						<el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
							<el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
	</el-table>
	<!-- 书页组件 -->
	<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5,10,15,20]"
		:size="size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
		@current-change="handleCurrentChange" />

	<!-- 编辑对话框，只能编辑回复内容 -->
	<el-dialog v-model="dialogFormVisible" :title="title" width="400px" @close="cancle">
		<el-form :model="counselorData" label-width="80px">
			<el-form-item label="回复内容">
				<el-input v-model="counselorData.talkReply" type="textarea" placeholder="请输入回复内容" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancle">取消</el-button>
				<el-button type="primary" @click="confirm">确定</el-button>
			</div>
		</template>
	</el-dialog>
	
	<router-view></router-view>
</template>

<script lang="ts" setup>
	import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	import type { UploadProps ,UploadUserFile} from 'element-plus'


	const pageSize = ref(5);
	const currentPage = ref(1);
	
	const size = ref('default');
	
	
	const queryInfo = reactive({
			talkContext:'',
			talkReply:'',
			pageNum: 1,
			pageSize: 5
		})

	const total = ref(0);
	const dataList = ref([]);
	
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;
	// // 查询数据
	const queryDataList = () => {
		axios.get(`/consultant/talk/page`, {
			params: queryInfo,
		}).then((res) => {
			if (res.code == 200) {
				dataList.value = res.data.list;
        console.log(dataList.value)
				total.value = res.data. total;
			} else {
				ElMessage.error('数据查询失败')
			}
		})
	}
	//组件加载完毕，查询数据
	onMounted(() => {
		queryDataList()
	})
	//存储复选的数据
	const multipleSelection = ref([])
	
	const handleSelectionChange = (val) => {
		multipleSelection.value = val.map(item=>{
			return item.id
		})
		
	}
	//每页显示条目数改变
	const handleSizeChange = (val) => {
		queryInfo.pageSize=val;
		queryDataList();
	}
	//页码改变
	const handleCurrentChange = (val) => {
		queryInfo.pageNum=val;
		queryDataList();
	}
	
	const title = ref('')
	// 控制对话框是否显示
	const dialogFormVisible = ref(false)
	
	// 新增和修改数据
	const counselorData = ref({
		id: '',
		talkReply: ''
	})

	
	const cancle = () => { 
		counselorData.value = {
			id: '',
			talkReply: ''
		}
		dialogFormVisible.value = false
	}
	
	const confirm = () => {
		if(counselorData.value.id){
    axios.put('/consultant/talk', counselorData.value)
      .then((resp)=>{
        if(resp.code == 200){
          ElMessage.success('修改成功')
        }else{
          ElMessage.error('修改失败')
        }
        queryDataList()
        dialogFormVisible.value = false
      })
  }else{
			axios.post('/consultant/talk/batch', counselorData.value)
				.then((resp) => {
					if (resp.code == 200) {
						sessionStorage.setItem('className',JSON.stringify(resp.data))
						ElMessage.success('新增成功')
					} else {
						ElMessage.error('新增失败')
					}
					queryDataList();
					dialogFormVisible.value = false
				})
		}
	}
	
	const add = () => {
		title.value = '新增擅长领域'
		dialogFormVisible.value = true
		}
	
	const edit=(row)=>{
		title.value='编辑回复内容';
		dialogFormVisible.value = true;
		// 只保留 id 和回复内容
		counselorData.value = {
			id: row.id,
			talkReply: row.talkContext || ''
		};
	}
	
	
	const remove=(id)=>{
		ElMessageBox.confirm('此操作永久删除该文件，是否继续？','提示',
		{
			confirmButtonText:'确定',
			cancelButtonText:'取消',
			type:'warning',
		},
	).then(()=>{
		axios.delete(`/consultant/talk/${id}`)
			.then(resp =>{
				if(resp.code==200){
					ElMessage.success('删除成功')
				}else{
					ElMessage.error('删除失败')
				}
				queryDataList();
			})
	}).catch(()=>{
		ElMessage({
			type:'info',
			message:'取消删除',
		})
	})
	}

  const batchRemove=()=>{
    ElMessageBox.confirm('此操作永久删除该文件，是否继续？','提示',
      {
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning',
      },
    ).then(()=>{
      const params = new URLSearchParams();
      multipleSelection.value.forEach(id => params.append('ids', id));
      axios.delete(`/consultant/talk/batch?${params.toString()}`)
        .then(resp =>{
          if(resp.code ==200){
            ElMessage.success('删除成功')
          }else{
            ElMessage.error(`删除失败: ${resp.msg || '未知错误'}`) // 增强错误提示
          }
          queryDataList();
        })
    }).catch(()=>{
      ElMessage({
        type:'info',
        message:'取消删除',
      })
    })
  }
	
	
</script>

<style>
	.avatar-uploader .el-upload {
			border: 1px dashed var(--el-border-color);
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			transition: var(--el-transition-duration-fast);
		}
	
		.avatar-uploader .el-upload:hover {
			border-color: var(--el-color-primary);
		}
	
		.el-breadcrumb {
		 margin-bottom: 15px;
		 padding: 0 0 15px;
		 border-bottom: 1px solid #ddd;
		 }
		 .el-pagination {
		 margin-top: 15px;
		 }
		 .demo-form-inline .el-input {
		 --el-input-width: 220px;
		 }
		 .demo-form-inline .el-select {
		 --el-select-width: 220px;
		 }
</style>